<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">订单管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/fix_order' }">
          <div class="div3">改单记录</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">订单详情</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->
    <div class="state">
      <p class="header" v-if="!is_null(detailC.orderUser)">
        订单状态：{{ detailC.orderUser.orderType }}
      </p>
      <ul>
        <li>
          <p v-if="!is_null(detailC.orderUser)">
            订单编号：{{ detailC.orderUser.orderIdStr }}
          </p>

          <p v-if="!is_null(detailC.orderUser)">
            下单时间：{{ detailC.orderUser.createdTime }}
          </p>
          <!-- <p>发货时间：--</p>
          <p>签收时间：--</p> -->
        </li>
      </ul>
    </div>
    <div class="address">
      <p class="header">收货人信息</p>
      <ul>
        <li>
          <p v-if="!is_null(detailC.orderUser)">
            收货人姓名：{{ detailC.orderUser.addressName }}
          </p>
          <p v-if="!is_null(detailC.orderUser)">
            联系电话：{{ detailC.orderUser.addressPhone }}
          </p>
          <p v-if="!is_null(detailC.orderUser)">
            收货地址：{{ detailC.orderUser.address }}
          </p>
        </li>
        <li>
          <p v-if="detailC.orderUser && detailC.orderUser.comment">
            备注：{{ detailC.orderUser.comment }}
          </p>
          <p v-else>备注：无</p>
        </li>
      </ul>
    </div>
    <div class="orderBox">
      <p class="header">订单商品</p>
      <el-table :data="detailC.orderCommodityList" style="width: 100%">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="number" label="商品数量"></el-table-column>
        <el-table-column prop="price" label="商品单价"></el-table-column>
        <el-table-column prop="brandName" label="商品品牌"></el-table-column>
        <el-table-column prop="typeName" label="商品分类"></el-table-column>
        <el-table-column
          prop="specificationName"
          label="商品规格"
        ></el-table-column>
        <el-table-column prop="total" label="商品小计"></el-table-column>
        <el-table-column prop="updatedTime" label="更新时间"></el-table-column>
      </el-table>
      <el-table :data="detailC.orderComplimentaryList" style="width: 100%">
        <el-table-column
          prop="complimentaryName"
          label="赠品名称"
        ></el-table-column>
        <el-table-column prop="number" label="赠品数量"></el-table-column>
        <el-table-column prop="price" label="赠品单价"></el-table-column>
        <el-table-column prop="brandName" label="商品品牌"></el-table-column>
        <el-table-column prop="typeName" label="赠品分类"></el-table-column>
        <el-table-column
          prop="specificationName"
          label="赠品规格"
        ></el-table-column>
        <el-table-column prop="total" label="赠品小计"></el-table-column>
        <el-table-column prop="updatedTime" label="更新时间"></el-table-column>
      </el-table>
    </div>
    <div class="total">
      <p v-if="!is_null(detailC.orderUser)">
        总计：共 {{ detailC.orderUser.pieceNumber }} 件
      </p>
      <!-- <p v-if="!is_null(detailC.orderUser)">
        运费： {{ detailC.orderUser.charge }}
      </p> -->
      <p v-if="!is_null(detailC.orderUser)">
        总价：{{ detailC.orderUser.total }}
      </p>
    </div>
    <div class="fix">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="最近改单记录" name="first">
          <div class="address" style="margin: 0; padding: 0">
            <p class="header">改单前收货地址</p>
            <ul>
              <li>
                <p v-if="!is_null(tableData.userChangeBefore.orderUserChange)">
                  收货人姓名：{{
                    tableData.userChangeBefore.orderUserChange.addressName
                  }}
                </p>
                <p v-if="!is_null(tableData.userChangeBefore.orderUserChange)">
                  联系电话：{{
                    tableData.userChangeBefore.orderUserChange.addressPhone
                  }}
                </p>
                <p v-if="!is_null(tableData.userChangeBefore.orderUserChange)">
                  收货地址：{{
                    tableData.userChangeBefore.orderUserChange.address
                  }}
                </p>
              </li>
              <li>
                <!-- <p>备注：无</p> -->
              </li>
            </ul>
          </div>
          <el-table
            :data="tableData.userChangeBefore.commodityChangeList"
            style="width: 100%"
          >
            <el-table-column prop="name" label="商品名称"></el-table-column>
            <el-table-column prop="number" label="商品数量"></el-table-column>
            <el-table-column prop="price" label="商品单价"></el-table-column>
            <el-table-column
              prop="specificationName"
              label="商品规格"
            ></el-table-column>
            <el-table-column prop="total" label="商品小计"></el-table-column>
            <el-table-column
              prop="updatedTime"
              label="更新时间"
            ></el-table-column>
          </el-table>
          <el-table
            :data="tableData.userChangeBefore.complimentaryChangeList"
            style="width: 100%"
          >
            <el-table-column
              prop="complimentaryName"
              label="赠品名称"
            ></el-table-column>
            <el-table-column prop="number" label="赠品数量"></el-table-column>
            <el-table-column prop="price" label="赠品单价"></el-table-column>
            <el-table-column
              prop="specificationName"
              label="赠品规格"
            ></el-table-column>
            <el-table-column prop="total" label="赠品小计"></el-table-column>
            <el-table-column
              prop="updatedTime"
              label="更新时间"
            ></el-table-column>
          </el-table>

          <div class="total">
            <p v-if="!is_null(tableData.userChangeBefore)">
              总计：共 {{ tableData.userChangeBefore.orderUserChange.pieceNumber }} 件
            </p>
            <!-- <p v-if="!is_null(detailC.orderUser)">
        运费： {{ detailC.orderUser.charge }}
      </p> -->
            <p v-if="!is_null(tableData.userChangeBefore)">
              总价：{{ tableData.userChangeBefore.orderUserChange.total }}
            </p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="所有改单记录" name="all">
          <el-table
            v-show="changeAllOrder.length"
            :data="changeAllOrder"
            style="width: 100%"
          >
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form class="demo-table-expand">
                  <el-form-item>
                    <p
                      v-for="items in props.row.commodityChangeList"
                      :key="items.id"
                    >
                      <span>{{ items.name }}</span>
                      <span>
                        {{ items.price }} × {{ items.number }} =
                        {{ items.total }} 元</span
                      >
                    </p>
                  </el-form-item>
                  <el-form-item v-if="props.row.complimentaryChangeList">
                    <span style="color: red">附属品：</span>
                    <p
                      class="complimentary"
                      v-for="items in props.row.complimentaryChangeList"
                      :key="items.id"
                    >
                      <span>{{ items.complimentaryName }}</span>
                      <span>
                        {{ items.price }} × {{ items.number }} =
                        {{ items.total }} 元</span
                      >
                    </p>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="orderUserChange.orderIdStr"
              label="订单编号"
            ></el-table-column>
            <el-table-column
              prop="orderUserChange.address"
              label="改单后收货地址"
            ></el-table-column>
            <el-table-column
              prop="orderUserChange.addressName"
              label="客户"
            ></el-table-column>
            <el-table-column
              prop="orderUserChange.addressPhone"
              label="手机号码"
            ></el-table-column>
            <el-table-column
              prop="orderUserChange.updatedTime"
              label="修改时间"
            ></el-table-column>
          </el-table>
        </el-tab-pane>
        <!-- <el-tab-pane label="物流记录" name="second">物流记录</el-tab-pane> -->
      </el-tabs>
    </div>
    <p style="height: 30px"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      tableData: [],
      orderId: "",
      detailC: "",
      changeAllOrder: [],
    };
  },
  created() {
    this.orderId = this.$route.query.orderId;
    this.detailAxios();
    this.gdRecord();
  },
  methods: {
    handleClick(tab) {
      if (this.activeName === "all") {
        this.axios
          .get(
            "/order/order/change/selectListByOrderId?orderId=" + this.orderId
          )
          .then((res) => {
            // console.log('改单详情')
            this.changeAllOrder = res.data;
          });
      }
    },
    detailAxios() {
      // console.log(this.orderId+"=-----this.orderId")
      this.axios.get("/order/order/user/detail/" + this.orderId).then((res) => {
        // console.log('改单详情')
        if (res.code == 0) {
          this.detailC = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 改单记录
    gdRecord() {
      this.axios
        .get("/order/order/change/selectUserChange?orderId=" + this.orderId)
        .then((res) => {
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    is_null(content) {
      if (content) {
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}

.div3 {
  margin-left: -8px;
  background: url(../../../assets/breadcrumb3.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

/deep/.el-table thead .cell {
  text-align: center !important;
}

/deep/.el-table td,
.el-table th {
  text-align: center;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 200px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
  text-align: left;
}

/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}

.header {
  font-size: 15px;
  color: #2d7edf;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/deep/.el-table thead {
  color: #2d7edf;
  text-align: center;

  .cell {
    text-align: center;
  }
}

.state {
  background: #fff;
  padding: 10px;

  ul {
    margin: 10px 0;

    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;

      p {
        display: inline-block;
        margin-right: 50px;
      }

      span {
        display: inline-block;
        margin-left: 20px;
        color: #2d7edf;
        font-weight: bold;
      }
    }
  }
}

/deep/.el-button {
  padding: 8px 10px;
}

/deep/.el-table thead {
  color: #2d7edf;

  .cell {
    text-align: left;
  }
}

.address {
  background: #fff;
  padding: 10px;
  margin: 15px 0;

  ul {
    margin: 10px 0;

    li {
      margin-left: 50px;
      line-height: 40px;
      font-size: 15px;

      p {
        display: inline-block;
        margin-right: 50px;
      }
    }
  }
}

.orderBox,
.fix {
  background: #fff;
  padding: 10px;
}

.total {
  margin: 15px 0;
  background: #fff;
  padding: 20px 10px;
  text-align: right;

  p {
    display: inline-block;
    font-size: 15px;
    color: #2d7edf;
    margin-left: 30px;
    font-weight: bold;
  }
}
</style>
